<template>
  <!--列表-->
  <div class="page-filter wrap">
    <div class="breadcrumbs">
      <a href="index.html">首页</a>&gt;<span class="cur">散标投资列表</span>
    </div>
    <div class="invest-filter" data-target="sideMenu">
      <div class="filter-inner clearfix">
        <div class="filter-item">
          <div class="hd">
            <h3>筛选投资项目</h3>
              <el-switch
                v-model="duo"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="多选">
              </el-switch>
          </div>
          <div class="bd">
            <dl>
              <dt>期限</dt>
              <dd>
                <ul class="a">
            <el-tag  style="width:100px"
             v-for="i in period"
             :key="i.value"
             type="success"
             :effect="i.effect">
              <li @click="dilk(i,1)">
             {{i.laber}}
             </li>
           </el-tag>
                </ul>
              </dd>
            </dl>
            
            <dl>
              <dt>年利率</dt>
              <dd>
                <ul class="b">
            <el-tag style="width:100px"
             v-for="i in lendYearRate"
             :key="i.value"
             type="success"
             :effect="i.effect">
              <li @click="dilk(i,2)">
             {{i.laber}}
             </li>
           </el-tag>
                </ul>
              </dd>
            </dl>
            <dl>
              <dt>还款方式</dt>
              <dd>
                <ul class="c">
            <el-tag style="width:100px"
             v-for="i in returnMethod"
             :key="i.value"
             type="success"
             :effect="i.effect">
              <li @click="dilk(i,3)">
             {{i.laber}}
             </li>
           </el-tag>
                </ul>
              </dd>
            </dl>
          </div>
        </div>
        <div class="common-problem">
          <h3>常见问题</h3>
          <ul>
            <li><a href="#">什么是债权贷？</a></li>
            <li><a href="#">关于"债权贷"产品的说明</a></li>
            <li><a href="#">金融理财收费标准</a></li>
            <li><a href="#">债权贷和房易贷、车易贷有什么区别？</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="invest-list mrt30 clearfix">
      <div class="hd">
        <h3>投资列表</h3>
        <div class="count">
          <ul>
            <li class="line">
              散标投资交易金额&nbsp;&nbsp;<span class="f20 bold"
                >73.54亿元</span
              >
            </li>
            <li>
              累计赚取收益&nbsp;&nbsp;<span class="f20 bold">2.52亿元</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="bd">
        <div class="invest-table clearfix">
          <div class="title clearfix">
            <ul>
              <li class="col-330">借款标题</li>
              <li class="col-180">
                <a href="javascript:url('order','account_up');" class=""
                  >借款金额</a
                >
              </li>
              <li class="col-110">
                <a href="javascript:url('order','apr_up');" class="">年利率</a>
              </li>
              <li class="col-150">
                <a href="javascript:url('order','period_up');" class=""
                  >借款期限</a
                >
              </li>
              <li class="col-150">还款方式</li>
              <li class="col-120">
                <a href="javascript:url('order','scale_up');" class=""
                  >借款进度</a
                >
              </li>
              <li class="col-120-t">操作</li>
            </ul>
          </div>
          <!------------投资列表-------------->
          <div class="item" v-for="lend in lendList" :key="lend.id">
            <ul>
              <li class="col-330 col-t">
                <NuxtLink :to="'/lend/' + lend.id" target="_blank">
                  <i class="icon icon-zhai"></i>
                </NuxtLink>
                <NuxtLink
                  class="f18"
                  :to="'/lend/' + lend.id"
                  :title="lend.title"
                  target="_blank"
                >
                  {{ lend.title }}
                </NuxtLink>
              </li>
              <li class="col-180">
                <span class="f20 c-333"> {{ lend.amount }}元 </span>
              </li>
              <li class="col-110 relative">
                <span class="f20 c-orange">
                  {{ lend.lendYearRate * 100 }}%
                </span>
              </li>
              <li class="col-150">
                <span class="f20 c-333">{{ lend.period }}个月</span>
              </li>
              <li class="col-150">{{ lend.param.returnMethod }}</li>
              <li class="col-120">
                <div class="circle">
                  <div class="left progress-bar">
                    <!-- <div
                      :class="
                        'progress-bgPic progress-bfb' +
                          Math.floor((lend.investAmount / lend.amount) * 10)
                      "
                    > -->
                    <div
                      :class="
                        'progress-bgPic progress-bfb' +
                          Math.floor((lend.investAmount / lend.amount) * 10)
                      "
                    >
                      <div class="show-bar">
                        {{ (lend.investAmount / lend.amount) * 100 }}%
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="col-120-2">
                <NuxtLink
                  class="ui-btn btn-gray"
                  :to="'/lend/' + lend.id"
                  target="_blank"
                >
                  {{ lend.param.status }}
                </NuxtLink>
              </li>
            </ul>
          </div>
          <!------------投资列表-------------->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '~/assets/css/index.css';
import '~/assets/css/detail.css';
import qs from "qs"
export default {
   data() {
    return {
      returnMethod:[
        {effect:"dark",value:0,laber:"不限"},{effect:"plain",value:4,laber:"到期还本付息"},
        {effect:"plain",value:3,laber:"按月付息"},{effect:"plain",value:2,laber:"到期还本"},
        {effect:"plain",value:1,laber:"等额本息"}],
      period:[
        {effect:"dark",value:0,laber:"不限"},{effect:"plain",value:[0,1],laber:"1月以下"},
        {effect:"plain",value:[1,3],laber:"1-3月"},{effect:"plain",value:[3,6],laber:"3-6月"},
        {effect:"plain",value:[6,12],laber:"6-12月"},{effect:"plain",value:[12],laber:"12月及以上"}],
      lendYearRate:[{effect:"dark",value:0,laber:"不限"},{effect:"plain",value:[0,0.12],laber:"12%以下"},
         {effect:"plain",value:[0.12,0.14],laber:"12%-14%"},{effect:"plain",value:[0.14,0.16],laber:"14%-16%"},
         {effect:"plain",value:[0.16],laber:"16%及以上"}],
      lendList: null, // 数据列表
      searchObj: {
        lendYearRate:0,
        period:0,
        returnMethod:0
      }, // 查询条件
      duo:true
    }
  },
   created() {
     this.fetch()
  },
  methods:{
    dilk(i,num){
      if(num==1){
        var j=0;
        for(;this.period[j];){
            if(this.period[j].value==i.value){
              this.period[j].effect="dark"
              this.searchObj.period=i.value
            }else{
              this.period[j].effect="plain"
            }
            j++
        }
      }
      if(num==2){
        var j=0;
        for(;this.lendYearRate[j];){
            if(this.lendYearRate[j].value==i.value){
              this.lendYearRate[j].effect="dark"
              this.searchObj.lendYearRate=i.value
            }else{
              this.lendYearRate[j].effect="plain"
            }
            j++
        }
      }
      if(num==3){
        var j=0;
        for(;this.returnMethod[j];){
            if(this.returnMethod[j].value==i.value){
              this.returnMethod[j].effect="dark"
              this.searchObj.returnMethod=i.value
            }else{
              this.returnMethod[j].effect="plain"
            }
            j++
        }
      }
      this.fetch()
    },
    fetch() {
      this.$axios
          .$get('/api/core/lend/list?'+qs.stringify(this.searchObj))
          .then((response) => {
            this.lendList=response.dataMap.lendList
          })
    },
  }

};
</script>
